<template>
  <div
    class="full-width"
    :class="(indentChild ? '' : `level-${level}`)"
  >
    <div class="comments-list">
      <div v-for="(c, idx) in data" :key="idx"
        class="comments-list-item column"
        :class="{'is-child': !!currentId}"
      >
        <div class="commments-title-info row full-width items-center">
          <div class="comments-title-info-avatar">
            <q-img
              v-if="c.UserAvatar"
              :src="c.UserAvatar | serverImage"
              class="q-mr-sm"
              alt="img" width="32px" height="32px"
              style="border-radius: 50%;background-color: #00000011;"></q-img>
            <q-img
              v-else
              src="images/admin/company@2x.png"
              class="q-mr-xs"
              alt="img" width="32px" height="32px"
              style="border-radius: 50%;background-color: #00000011;"></q-img>
          </div>
          <div class="comments-title-info-user">{{ c.UserName }}</div>
          <q-space></q-space>
          <div class="comments-title-info-date">{{ c.LastUpdateDate | dateAndTime }}</div>
        </div>

        <div class="full-width row items-start" style="padding-left: 40px;padding-right:12px;">
          <div class="comment-to-user-chain" v-if="level > 0 && !indentChild">
            {{$t('回复')}} {{ c.CommentTo ? c.CommentTo.UserName : '' }}:
          </div>
          <div v-html="c.Content" class="comment-content-html" style="display:inline-block"></div>
        </div>

        <div class="comments-actions full-width row justify-end" v-if="!ReadOnly">
          <!-- <q-btn dense flat @click="replyComment(c)">回复</q-btn> -->
          <!-- <q-btn dense flat @click="editComment(c)">编辑</q-btn> -->
          <q-btn dense flat @click="deleteComment(c)">删除</q-btn>
        </div>
        <div class="child-comments full-width" :class="{
          'q-pl-xl': indentChild,
        }">
          <StdDevStandardComments
            :ReadOnly="ReadOnly"
            :level="level + 1"
            :indentChild="indentChild"
            :data="c.children" :currentId="c.id"
            @reply-comment="$emit('reply-comment', $event)"
            @edit-comment="$emit('edit-comment', $event)"
            @delete-comment="$emit('delete-comment', $event)"
          ></StdDevStandardComments>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StdDevComments',
  props: {
    ReadOnly: {
      type: Boolean,
      default: false,
    },
    currentId: {
      type: String,
      default: '',
    },
    data: {
      type: Array,
      default: () => [],
    },
    indentChild: {
      type: Boolean,
      default: true,
    },
    level: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      replying: false,
      editing: false,
    };
  },
  methods: {
    replyComment(c) {
      this.$emit('reply-comment', c);
    },
    editComment(c) {
      this.$emit('edit-comment', c);
    },
    deleteComment(c) {
      this.$emit('delete-comment', c);
    },
  },
};
</script>

<style lang="scss" scoped>
.comments-list {
  &-item {
    border-top: 1px solid #e8e8e8;
    &:first-child {
      border-top: none;
    }

    &.is-child {
      border-top: 1px solid #e8e8e8;
    }

    .comment-to-user-chain {
      font-size: 1rem;
      font-weight: 400;
      color: #999999;
      margin-right: 8px;
    }

    &:not(:first-child) {
      padding-top: 12px;
    }

    .comments-actions {
      color: #999999;
    }
  }
  .comments-title-info {
    &-user {
      font-size: 16px;
      font-weight: 500;
      color: #999999;
    }
    &-date {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
    }
  }
  .comment-content-html {
    img {
      max-width: 100%;
    }

    :deep(*) {
      font-size: 1rem !important;
    }
  }
}
.level-1 {
  padding-left: 40px;
}

.hovering {
  background-color: #f5f5f5;
}
</style>
